<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="客户留资">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- tabs筛选 -->
		<view class="tabslist">
			<view class="anliList">
				<u-tabs :list="anli_list" :current="current" lineWidth="48rpx" lineColor="#FF6400" :activeStyle="{
			    color: '#FF6400',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" @click="anli_click"></u-tabs>
			</view>
		</view>
		<view class="fengge-list" v-if="current == 0">
			<view class="" v-if="!kehu_info_lists.length">
				<u-empty>
				</u-empty>
			</view>
			<view class="gugong-info" v-else v-for="(kehu_info,index) in kehu_info_lists" :key="index">
				<view class="w-630">
					<view class="d-flex justify-content-space-between">
						<view class="d-flex align-items">
							<image class="tximg" :src="kehu_info.user.avatar" mode="widthFix"></image>
							<view class="">
								<view class="name">{{kehu_info.user.nickname}}</view>
								<view class="longtime">{{kehu_info.shijian}}</view>
							</view>
						</view>
						<view class="longtime">{{kehu_info.city}}</view>
					</view>
					<view class="mianjiList flex-wrap d-flex align-items">
						<view class="mianji" v-if="kehu_info.miankuan">面宽：<text
								class="num">{{kehu_info.miankuan}}米</text> </view>
						<view class="mianji" v-if="kehu_info.dixiashi">地下室：<text
								class="num">{{kehu_info.dixiashi ? '有' : ''}}</text> </view>
						<view class="mianji" v-if="kehu_info.jinshen">进深：<text class="num">{{kehu_info.jinshen}}米</text>
						</view>
						<view class="mianji" v-if="kehu_info.cengshu">层高：<text class="num">{{kehu_info.cengshu}}层</text>
						</view>
						<view class="mianji" v-if="kehu_info.fenggename">风格：<text
								class="num">{{kehu_info.fenggename}}</text> </view>
						<view class="mianji" v-if="kehu_info.loutai">露台：<text class="num">{{kehu_info.loutai}}米</text>
						</view>
						<view class="mianji" v-if="kehu_info.jiegouname">结构：<text
								class="num">{{kehu_info.jiegouname}}</text> </view>
						<view class="mianji" v-if="kehu_info.tingyuan">庭院：<text
								class="num">{{kehu_info.tingyuan}}米</text> </view>
						<view class="mianji" v-if="kehu_info.yusuan">预算：<text class="num">{{kehu_info.yusuan}}万</text>
						</view>
						<view class="mianji" v-if="kehu_info.wudingname">屋顶：<text
								class="num">{{kehu_info.wudingname}}</text> </view>

					</view>
					<view class="kf-num d-flex align-items" @click="hujiao_phone(kehu_info)">
						<image class="kefu_phone" src="../static/phone.png" mode="widthFix"></image>
						<view class="phone-n">{{kehu_info.shoujihao}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fengge-list" v-if="current == 1">
			<view class="" v-if="!zhuanxiu_info_lists.length">
				<u-empty>
				</u-empty>
			</view>
			<view class="gugong-info" v-else v-for="(zx_info,index) in zhuanxiu_info_lists" :key="index">
				<view class="w-630">
					<view class="d-flex justify-content-space-between">
						<view class="d-flex align-items">
							<image class="tximg" :src="zx_info.user.avatar" mode="widthFix"></image>
							<view class="">
								<view class="name">{{zx_info.user.nickname}}</view>
								<view class="longtime">{{zx_info.shijian}}</view>
							</view>
						</view>
						<view class="longtime">{{zx_info.city}}</view>
					</view>
					<view class="mianjiList flex-wrap d-flex align-items">
						<view class="mianji">面积：<text class="num">{{zx_info.mianji}}米</text> </view>
						<view class="mianji">预算：<text class="num">{{zx_info.shijiyusuan}}万</text> </view>
						<view class="mianji">户型：<text
								class="num">{{zx_info.huxingname ? zx_info.huxingname : ''}}</text> </view>
					</view>
					<view class="kf-num d-flex align-items" @click="hujiao_phone(zx_info)">
						<image class="kefu_phone" src="../static/phone.png" mode="widthFix"></image>
						<view class="phone-n">{{zx_info.shoujihao}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShijiyusuan,
		getZaojiayusuan
	} from '@/api/user.js'
	export default {
		data() {
			return {
				current: 0,
				anli_list: [{
					id: 0,
					name: '建房造价',
				}, {
					id: 1,
					name: '装修预算'
				}],
				kehu_info_lists: [],
				zhuanxiu_info_lists: [],
				page: 1,
				limit: 7,
			}
		},
		onLoad() {
			this.get_zaojia()
			this.get_zhuangxiu()
		},
		// 用户下拉加载
		onPullDownRefresh() {
			this.page = 1
			this.get_zaojia()
			this.get_zhuangxiu()
		},
		// 上拉触底加载
		onReachBottom() {
			this.page++
			this.get_zaojia()
			this.get_zhuangxiu()
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			anli_click(item) {
				console.log('item', item);
				this.current = item.index
			},
			// 获取建房造假
			get_zaojia() {
				var data = {
					page: this.page,
					limit: this.limit,
				}
				getZaojiayusuan(data).then(res => {
					console.log("获取造价", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.kehu_info_lists = res.data.list
						} else {
							this.kehu_info_lists = this.kehu_info_lists.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			hujiao_phone(e) {
				console.log("呼叫", e);
				uni.makePhoneCall({
					phoneNumber: e.shoujihao,
					success: (s) => {
						console.log('拨打电话成功！',s);
					},
					fail: (err) => {
						console.error('拨打电话失败！',err);
					}
				})
			},
			// 获取装修预算
			get_zhuangxiu() {
				var data = {
					page: this.page,
					limit: this.limit,
				}
				getShijiyusuan(data).then(res => {
					console.log("获取装修预算", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.zhuanxiu_info_lists = res.data.list
						} else {
							this.zhuanxiu_info_lists = this.zhuanxiu_info_lists.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
		}
	}
</script>

<style>
	.kf-num {
		margin-top: 20rpx;
	}

	.phone-n {
		font-size: 28rpx;
		font-weight: normal;
		color: #333333;
	}

	.kefu_phone {
		width: 45rpx;
		display: block;
		margin-right: 20rpx;
	}

	.mianjiList {
		width: 630rpx;
		padding-bottom: 25rpx;
		border-bottom: 1px solid #E7E7E7;
		margin-top: 25rpx;
	}

	.num {
		font-size: 28rpx;
		font-weight: normal;
		color: #333;
	}

	.mianji {
		font-size: 28rpx;
		font-weight: normal;
		color: #999999;
		margin-right: 30rpx;
	}

	.longtime {
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
		margin-top: 5rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: normal;
		color: #333333;
	}

	.tximg {
		width: 84rpx;
		display: block;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.tabslist {
		width: 750rpx;
		background-color: #fff;
		height: 84rpx;
	}

	.gugong-info {
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx auto;
		padding: 25rpx 0;
	}

	.fengge-list {
		padding-bottom: 200rpx;
	}

	.anliList {}

	page {
		background-color: #F7F8FB;
	}
</style>